<template>
	<view class="information-details information-details-index" 
		  style="min-height: 100vh;background-color: rgb(220, 210, 190);padding-top: 1px;">
		<view>
			<view class="titleanddate">
				<text style="font-size: 24px;font-weight: bolder;">
					{{info.title}}
				</text>
			</view>
			<view class="titleanddate">
				<text>发布时间: {{formatDateTime(info.pubDatetime)}}</text>
			</view>
			<view class="image" style="width: 700rpx;height: 205px; margin: 10px 0;"
					v-if="info.photoimage">
				<image 
					:src="baseUrl+info.photoimage" 
					alt=""
					style="margin: 0 25rpx;"
					/>
			</view>
			<view class="video" style="width: 700rpx;height: 205px; margin: 10px 0;" 
					v-if="info.videourl && info.infoSection != 5">
				<video 
					id="video"
					controls="true"
					:src="baseUrl+info.videourl"
					autoplay="true"
					style="width: 100%;height: 100%;margin: 0 25rpx;">
				</video>
			</view>
			<view v-if="info.videourl && info.infoSection == 5" class="audio" style="width: 700rpx; margin: 0 auto;">
				<audio 
					name="cl"
					author="alan"
					id="aideo" 
					controls="true" 
					:src="baseUrl+info.videourl" 
					style="width: 700rpx;height: 50px;border-radius: 10px;">
				</audio>
			</view>
			<view class="content">
				<!-- <rich-text :nodes="info.infocontent"></rich-text> -->
				<uv-parse :content="info.infocontent" :selectable="true"></uv-parse>
			</view>
			<view v-if="info.infoSection == 2" class="share" style="width: 750rpx;height: 40px;">
				<button open-type="share" class="share-btn" style="line-height: 40px; margin: 20px auto; border-radius: 10px; background-color: #eee; width: 700rpx;height: 40px;text-align: center;">
					分享
				</button>
			</view>
			<!-- 点赞区域 -->
			<view class="good" style="width: 700rpx;height: 60px;margin: 0 auto;">
				<view @click="doGood" class="good-btn flex-row-center" 
					  style="width: 100%;height: 30px;margin: 10px 0;
							 background-color: #eee;border-radius: 5px;">
					<uni-icons :type="goodIcon" size="25"></uni-icons>
					({{info.plikes}})点赞
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { loginSystem } from '/api/login.js'
	import { BASE_URL, BASE_IMAGE_URL, GET_USER_INFO } from '/utils/CommonValues.js'
	import request from '../../../utils/request.js';
	export default {
		data() {
			return {
				baseUrl: '',
				id: '',
				info: {},
				userInfo: {},
				goodIcon: 'hand-up', // hand-up hand-up-filled 点赞的图标
			}
		},
		onLoad(option) {
			// uni.showToast({
			// 	title: JSON.stringify(option),
			// 	icon: 'none'
			// })
			if(option.parentAccount) {
				// uni.showToast({
				// 	title: option.parentAccount
				// })
				// 把上级信息保存到本地
				if(option.parentAccount) {
					uni.setStorage({
						key: 'parent_account',
						data: option.parentAccount
					})
				}
				// uni.showToast({
				// 	title: option.parentAccount
				// })
			}
			this.baseUrl = BASE_IMAGE_URL;
			this.id = option.id;
			loginSystem().then(data => {
				this.token = data;
				this.getInfo();
			})
			GET_USER_INFO().then(res => {
				this.userInfo = res;
				this.isGood();
			})
		},
		// onShareTimeline() {
			
		// },
		onShareAppMessage(res) {
		    // 构建分享参数
		    let params = {
		      id: this.id,
			  parentAccount: this.userInfo.advMembersId
		    };
		    // 将参数转换为查询字符串
		    let query = Object.keys(params)
		      .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
		      .join('&');
		    
		    // 返回自定义分享内容
		    return {
		      title: '资讯分享',
		      path: `/pages/index/informationDetails/informationDetails?${query}`,
		      imageUrl: baseUrl+info.photoimage // 分享卡片的图片，可选
		    };
		},
		methods: {
			formatDateTime(isoString) {
			  // const date = new Date(isoString);
			  // const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
			  // const formatter = new Intl.DateTimeFormat('zh-CN', options);
			  // return formatter.format(date);
			   return isoString.replace('T', '  ')
			},
			// 点赞
			doGood() {
				if(this.goodIcon === 'hand-up') {
					request.POST("/system/infoliks/dogood", {
						advPlatinfosId: this.id,
						advMembersId: this.userInfo.advMembersId
					}).then(response => {
						console.log(response, "点赞")
						this.goodIcon = 'hand-up-filled'
						this.info.plikes = +this.info.plikes + 1;
					})
				} else {
					console.log("取消点赞")
					request.POST("/system/infoliks/cancelgood", {
						advPlatinfosId: this.id,
						advMembersId: this.userInfo.advMembersId
					}).then(response => {
						console.log(response, "取消点赞")
						this.goodIcon = 'hand-up'
						this.info.plikes = +this.info.plikes - 1;
					})
				}
			},
			// 判断自己是否点赞了该资讯
			isGood() {
				request.GET("/system/infoliks/list", {
					advPlatinfosId: this.id,
					advMembersId: this.userInfo.advMembersId
				}).then(response => {
					console.log(response, "是否点赞了")
					if(response.rows == 0) {
						this.goodIcon = 'hand-up'
					} else {
						this.goodIcon = 'hand-up-filled'
					}
				})
			},
			getInfo() {
				uni.request({
					url: `${BASE_URL}/system/platinfos/${this.id}`,
					method: 'GET',
					header: {
						"Content-Type": "application/json;charset=utf-8",
						"Authorization": this.token
					},
					dataType: 'json',
					success: (response) => {
						this.info = response.data.data;
						console.log(response)
					},
					fail: (error) => {
						uni.showToast({
							title: '加载失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
// @import url("index.css");
p {
	line-height: 100px;
}
.content {
	display: flex;
	justify-content: center;
	margin: 10px;
}
.icon {
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.titleanddate {
	width: 95%;
	display: flex;
	justify-content: center;
	margin-top: 10px;
	margin-left: 10px;
}
</style>
